<template>
	<view :class="['cateBox',isLoading?'':'u-flex u-col-start']">
		<loading-page mode="zoom" :show="isLoading"></loading-page>
		<!-- 左侧列表 -->
		<scroll-view class="cate-left" :style="{height:residueHeight+'px'}" scroll-y="true" :scroll-top="verticalNavTop"
			scroll-with-animation>
			<view class="category-left">
				<view :class="['li u-flex-center',currentTab == k ?'li-active':'']" v-for="(c,k) in data" :key="k"
					@click="tapselect(k)">
					<view class="line" v-if="currentTab == k"></view>
					<view class="li-text">
						<view style="text-align: center;" v-for="(line, j) in formattedName(c.name)" :key="j">
							{{ line }}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 右侧列表 -->
		<scroll-view class="cate-right" :style="{height:residueHeight+'px'}" scroll-y="true" @scroll="mainScroll"
			:scroll-into-view="'cate-'+mainCur" scroll-with-animation>
			<view v-for="(item,index) in data" :key="index" :id="'cate-'+index">
				<view class="right-header u-flex-between">
					<view class="header-text">{{item.name}}</view>
				</view>
				<view class="product" v-if="item.product_list.length > 0">
					<view class="li u-flex u-col-start" v-for="(v,l) in item.product_list" :key="l"
						@click="productChange(v)">
						<view class="li-img">
							<u-image :src="v.cover_image" width="164rpx" height="164rpx" radius="8"></u-image>
						</view>
						<view class="li-right u-flex-col u-flex-between u-col-start">
							<view class="li-name">{{v.name}}</view>
							<view class="li-footer u-flex-between">
								<view class="authentication" v-if="v.mod_type == 2 && enterprises_auth_apply != 1">
									￥认证可查看价格</view>
								<view class="footer-left u-flex" v-else>
									<view class="li-price">
										<span style="font-size: 24rpx;color: #CC242B;line-height: 28rpx;">￥</span>
										<span style="font-size: 28rpx;color: #CC242B;">{{v.price}}</span>
									</view>
									<view class="original-price">¥{{v.minPriceSpec.original_price}}
									</view>
								</view>
								<view class="footer-right">
									<view class="shop-base" @click.stop="addShop(v)">
										<u-icon name="shopping-cart" color="#FFFFFF" size="20"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		props: {
			data: {
				type: Array,
				default () {
					return []
				}
			},
			residueHeight: {
				type: Number,
				default: 0
			},
			navbarHeight: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				currentTab: 0,
				mainCur: 0,
				verticalNavTop: 0,
				list: [{}],
				isLoading: true,
				lastHeight: 0,
			}
		},
		mounted() {
			// this.getListHeight()
		},
		computed: {
			...mapState({
				systemConfig: state => state.init.systemConfig,
				enterprises_auth_apply: state => state.init.enterprises_auth_apply,
			})
		},
		watch: {
			data: {
				handler(newVal, oldVal) {
					this.mainCur = this.currentTab
					setTimeout(() => {
						this.getListHeight()
					}, 20)
				},
				immediate: true, // 添加 immediate 选项
			}
		},
		methods: {
			getListHeight() {
				this.mainCur = 0;
				this.currentTab = 0
				this.list = []
				this.getHeight().then(() => {
					// 执行监听事件
					// this.tapselect(0);
				});
			},
			// 处理文字换行
			formattedName(name) {
				const chunkSize = 5;
				const lines = [];
				for (let i = 0; i < name.length; i += chunkSize) {
					lines.push(name.slice(i, i + chunkSize));
				}
				return lines;
			},
			itemClick(item) {
				this.$emit('click', item)
			},
			productChange(item) {
				// 可做页面跳转等
				this.$navigateTo('/subPackages/product/product-detail?product_id=' + item.id)
			},
			//点击左侧按钮
			tapselect(index) {
				this.currentTab = index;
				this.mainCur = index;
				this.verticalNavTop = (index - 1) * 50;
			},
			//右侧滚动
			mainScroll(e) {
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						// 此处屏蔽，避免点击最后一个回退， 但是没有右边滚动指示
						if ((this.currentTab != this.list.length - 1) || this.currentTab == this.list.length - 1) {
							// if (this.currentTab != this.list.length - 1) {
							this.currentTab = i;
							this.verticalNavTop = (i - 1) * 50
							return false
						}
					}
				}
			},
			//获取右侧每项的top和bottom,里面需获取对应dom元素的高度，所以只能在mounted生命周期里调用
			getHeight() {
				return new Promise((resolve, reject) => {
					var top = 0;
					var bottom = 0;
					var temp = 0;
					for (let i = 0; i < this.data.length; i++) {
						let view = uni.createSelectorQuery().select("#cate-" + i)
						// #ifdef  MP-WEIXIN
						view = uni.createSelectorQuery().in(this).select("#cate-" + i);
						//	#endif
						view.fields({
							size: true
						}, data => {
							top = temp;
							bottom = temp + data.height;
							this.list[i] = {
								top: top,
								bottom: bottom
							};
							temp = bottom;
							if (data.height != 0) {
								this.lastHeight = this.residueHeight - data.height
							}
							this.isLoading = false;
							if (i === this.data.length - 1) {
								resolve(); // 所有异步操作完成后，调用resolve()
							}
						}).exec();
					}
				});
			},
			// 加入购物车
			addShop(e) {
				if (!this.$isLogin()) {
					this.$navigateTo()
					return;
				}
				if (e.mod_type == 2 && this.enterprises_auth_apply != 1) {
					this.$emit('enterpriseChange')
					return;
				}
				let params = {
					product_type: 1,
					type: 3,
					product_id: e.id,
					product_spec_id: e.product_spec_id,
					number: 1,
				}
				this.$post("shopCart/addReduce", params).then(res => {
					this.$showToast(res.msg)
					if (res.code == 200) {
						// 更新购物车总数
						this.$store.commit('shopCart/setShopCartNumber', res.data.total);
						// 更新已购物车
						this.$store.commit('shopCart/setIsUpdate');
						// 关闭弹框
						this.specClose();
					}
				}).catch(ex => {
					this.$errorToast()
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cateBox {
		background: #fff;

		.cate-left {
			width: 176rpx;

			.category-left {

				.li {
					width: 176rpx;
					padding: 35rpx 0;
					position: relative;
					background-color: #F5F5F5;
					font-size: 26rpx;
					color: #626262;

					.line {
						width: 8rpx;
						height: 58rpx;
						background: #000000;
						border-radius: 0rpx 8rpx 8rpx 0rpx;
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}

				.li-active {
					color: #000000;
					background-color: #FFFFFF;
				}
			}
		}

		.cate-right {
			flex: 1;

			.right-header {
				padding: 10rpx 28rpx 10rpx 22rpx;
				box-sizing: border-box;
				width: 100%;
				background-color: #FFFFFF;

				.header-text {
					font-size: 28rpx;
					color: $base-price-color;
				}
			}

			.product {
				padding: 0 28rpx 0 22rpx;
				box-sizing: border-box;
				position: relative;

				.li {
					padding: 30rpx 0;
					border-bottom: 2rpx solid #EEEEEE;

					.li-img {
						box-shadow: 0rpx 6rpx 6rpx 2rpx rgba(0, 0, 0, 0.16);
						border-radius: 16rpx;
					}

					.li-right {
						flex: 1;
						height: 164rpx;
						padding-left: 34rpx;

						.li-name {
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							font-size: 28rpx;
						}

						.li-footer {
							width: 100%;

							.footer-left {
								.li-price {
									padding-right: 10rpx;
								}

								.original-price {
									font-size: 20rpx;
									color: #A7A7A7;
									text-decoration: line-through;
								}
							}

							.footer-right {
								.shop-base {
									padding: 12rpx;
									border-radius: 50%;
									background-color: #000000;
								}
							}
						}

						.authentication {
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 500;
							font-size: 24rpx;
							color: #CC242B;
						}
					}
				}
			}

			.empty {
				color: #abaeb5;
				font-size: 32rpx;
				text-align: center;
			}
		}
	}
</style>